import React, { Component } from 'react'
import { Popup, Form, Input } from 'semantic-ui-react'
import { SketchPicker } from 'react-color'

export default class componentName extends Component {
  componentDidMount() {
    const { color } = this.props
    if (color) return
    let hex = Math.floor(Math.random() * 16777216).toString(16) // 生成ffffff以内16进制数
    while (hex.length < 6) {
      // while循环判断hex位数，少于6位前面加0凑够6位
      hex = `0${hex}`
    }
    this.setState({ color: `#${hex}` })
  }

  onColorChange = ({ hex }) => {
    const { onChange } = this.props
    onChange(hex)
  }

  render() {
    const { color } = this.props
    return (
      <Popup
        trigger={(
          <Form.Field width={5}>
            <Input
              label={{ style: { backgroundColor: color, width: '4em' } }}
              labelPosition="right"
              type="text"
              onChange={this.on_change_color_input}
              value={color.toUpperCase()}
              fluid
            />
          </Form.Field>
)}
        on="focus"
        hideOnScroll
      >
        <Popup.Content>
          <SketchPicker color={color} onChangeComplete={this.onColorChange} />
        </Popup.Content>
      </Popup>
    )
  }
}
